<template>
  <div>
    hello, world
    <br />
    <slot>默认插槽：default</slot>
    <br />
    <slot name="name">name插槽：default</slot>
    <br />
    作用域插槽,下面input的值：
    <slot v-if="$scopedSlots.custom" name="custom" :menu="{ vm: this }"></slot>
    <ep-divider></ep-divider>
    <ep-row>
      <ep-col :col="12">
        <ep-button type="primary" @click="testApi">测试接口调用</ep-button>
      </ep-col>
      <ep-col :col="12">
        <ep-button type="primary" @click="testStore">打印 store</ep-button>
      </ep-col>
      <ep-col :col="12">
        <ep-button type="primary" @click="testRouter">打印 router</ep-button>
      </ep-col>
      <ep-col :col="12">
        <childCpt />
      </ep-col>
      <ep-col :col="12">
        <ep-input v-model="input"></ep-input>
        <ep-button @click="handleEmit">向外抛事件</ep-button>
      </ep-col>
      <ep-col :col="12">
        <div ref="chart" style="height: 200px"></div>
      </ep-col>
    </ep-row>
    从主框架获取的 store：{{ userMainInfo }}
  </div>
</template>

<script>
import childCpt from '../component/child'
import { helloApi } from 'chunk/api/hello'
import epui from 'ep-ui'
import chartBaseMixin from '@/common/mixins/chartBaseMixin'
// import moment from 'moment'
// console.log('moment', moment());
console.log('ep-ui', epui)

export default {
  components: {
    childCpt
  },
  mixins: [chartBaseMixin],

  data() {
    return {
      input: '哈哈哈'
    }
  },

  mounted() {
    this.initChart()
    this.setOption()
  },

  computed: {
    userMainInfo() {
      return this.$store.state.app.userMainInfo
    }
  },

  methods: {
    testApi() {
      helloApi().then(_ => {
        this.$success('接口调用成功')
      })
    },
    testStore() {
      console.log(this.$store.state)
    },
    testRouter() {
      console.log(this.$router)
    },
    setOption() {
      let option = {
        // title: {
        //   subtext: "Fake Data",
        //   left: "center",
        // },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '100%',
            center: ['70%', '50%'],
            right: '1%',
            data: [
              { value: 1048, name: '完美' },
              { value: 735, name: '良好' },
              { value: 580, name: '一般' },
              { value: 484, name: '很差' },
              { value: 300, name: '无状态' }
            ],
            label: {
              show: false
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chartObj.setOption(option)
    },
    handleEmit() {
      this.$emit('test-emit', this.input)
    }
  }
}
</script>

<style></style>
